<!--
 * @Description: 增长率
 * @Author: Ronda
 * @Date: 2020-06-19 14:43:10
 * @LastEditors: Zourongsheng
 * @LastEditTime: 2021-07-17 16:20:50
-->
<template>
  <div height="100%">
    <div id="container" class="container"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    draw1() {
      var map = new AMap.Map("container", {
        mapStyle: "amap://styles/dark",
        zoom: 5,
        pitch: 0,
        center: [104.090834, 31.270677],
        features: ["bg", "road"],
        viewMode: "3D",
        // showLabel: true,
      });

      var layer = new Loca.LabelsLayer({
        fitView: true,
        map: map,
        collision: true,
      });

      $.get(
        "//a.amap.com/Loca/static/mock/trafficjam_lnglat.csv",
        function (datas) {
          layer
            .setData(datas, {
              type: "csv",
              lnglat: function (o) {
                return dist[o.value["地区"]];
              },
              lnglat: "lnglat",
            })
            .setOptions({
              style: {
                direction: "center",
                offset: [0, 0],
                text: function (data) {
                  return data.value["city"] + " " + data.value["mom"];
                },
                fillColor: function (data) {
                  var income = +data.value["mom"].slice(0, -1);
                  return income < -5
                    ? "#0C6DB0"
                    : income < -4
                    ? "#99d594"
                    : income < -3
                    ? "#99d594"
                    : income < -2
                    ? "#fee08b"
                    : income < -1
                    ? "#fee08b"
                    : "#fc8d59";
                },
                fontSize: function (data) {
                  var income = +data.value["mom"].slice(0, -1);
                  return income < -5
                    ? 12
                    : income < -4
                    ? 12
                    : income < -3
                    ? 16
                    : income < -2
                    ? 18
                    : income < -1
                    ? 26
                    : 30;
                },
                strokeWidth: 0,
              },
            })
            .render();

          layer.setzIndex(100);
        }
      );
    },
  },
  created() {},
  mounted() {
    this.draw1();
  },
};
</script>
<style scoped>
#lwlmap {
  width: 100%;
  height: 700px;
  margin: 0;
  padding: 0;
}

.demo-title {
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 1;
  /* color: rgb(16, 212, 105); */
}

h1 {
  font-size: 18px;
  margin: 0;
  color: rgb(245, 10, 10);
}

h3 {
  font-size: 12px;
  font-weight: normal;
  margin-top: 5px;
  color: rgb(194, 235, 14);
}
</style>